import { ref, onMounted, onUnmounted } from 'vue'
import { dateFilter, timeFilter } from '@/utils/dateUtils'

export function clock () {
  const now = new Date()
  const date = ref(dateFilter(now))
  const time = ref(timeFilter(now))

  let task

  const start = () => {
    task = setInterval(() => {
      const now = new Date()
      date.value = dateFilter(now)
      time.value = timeFilter(now)
    }, 1000)
  }

  onMounted(start)

  onUnmounted(() => {
    task && clearInterval(task)
  })

  return {
    date,
    time
  }
}
